<template>
  <div class="nav-container">
    <div style="font-family: 'hey_elsie_cuteregular';margin-bottom: 8px">
      <!--        <span style="font-size: 24px">&#45;&#45; </span>-->
      <span style="font-size:30px;color:#c2a6fa">D</span>
      <span style="font-size:22px;color:#ffa0d1">a</span>
      <span style="font-size:24px;color:rgba(255, 213, 221, 0.65)">i</span>
      <span style="font-size:22px;color:#a6bfff">s</span>
      <span style="font-size:28px;color:#ffdf9e">y</span>
      <!--        <span style="font-size: 24px"> &#45;&#45;</span>-->
    </div>
    <simple-nav :value="navList"></simple-nav>
    <div class="nav-footer">
      <h1 id="nav-footer-logo">
        <a href="#">
          Hello
          <span>Friend</span>
        </a>
      </h1>
      <div class="nav-subscribe">
        <h3 style="font-family: 'coolveticaregular';padding-left: 4px">Every single day without dancing is one
          day we betrayed of life </h3>
        <form action="#" class="nav-form">
          <!--          <div class="nav-form-group">-->
          <!--            <div class="nav-icon"></div>-->
          <!--            <input style="font-family: 'coolveticaregular'" type="text" placeholder="">-->
          <!--          </div>-->
        </form>
      </div>
      <!--      <p class="footer-info">Copyright@ 2019 All rights reserved</p>-->
      <p class="footer-info">Theme By <a href="https://colorlib.com" target="_blank">Colorlib</a><span class="ml-5" style="font-weight: 600">当前在线：{{userCount}}</span></p>
      <p class="footer-info">Made with <span class="iconfont icon-heart"></span> by <b>Ksami[糖糖棠汤]</b></p>
      <p class="footer-info f-y-center">
        <img style="width: 14px;height: 14px;" class="mr-2" src="/image/others/TB1..50QpXXXXX7XpXXXXXXXXXX-40-40.png"
             alt=""/>
        <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=34072102000117"
           style="display:inline-block;text-decoration:none;height:20px;line-height:20px;">皖公网安备 34072102000117号
        </a>
      </p>
    </div>
  </div>
</template>

<script>
import SimpleNav from './NavSimple'
import constant from '../../libs/constant'

export default {
  name: 'LeftNav',
  components: { SimpleNav },
  props: {
    userCount: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      navList: constant.nav
    }
  },
}
</script>

<style>

.nav-container {
  position: relative;
  height: 100%;
  transition: .3s;
  padding: 10px 30px 40px;
  overflow: hidden;
  z-index: 9;
  visibility: visible;
}

.nav-container .footer-info {
  margin: 2px 0;
  font-size: 12px;
}


.nav-footer {
  font-size: 17px;
  color: rgba(0, 0, 0, .6);
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
  padding: 0 20px;
}

#nav-footer-logo {
  display: block;
  height: 120px;
  margin-bottom: 10px;
  /*background: url("/image/others/75746956_p0.jpg") no-repeat center;*/
  /*background: url("/image/others/76594489_p10.jpg") no-repeat center;*/
  background: url("/image/others/80526511_p0 (1).jpg") no-repeat center;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-background-clip: text;
  -moz-text-fill-color: transparent;
  background-size: cover;
  background-color: transparent;
  font-family: "hey_elsie_cuteregular";
  font-weight: 400;
  font-size: 62px;
  line-height: 60px;
}

.nav-subscribe {
  margin: 0 0 24px;
}

.nav-subscribe h3 {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 8px;
  color: rgba(0, 0, 0, .8);
}

.nav-subscribe > .nav-form {
  display: block;
  width: 100%;
  height: 52px;
}

.nav-form > .nav-form-group {
  position: relative;
  margin-bottom: 0;
}

.nav-form-group > input:focus {
  outline: none;
}

.nav-form-group > input {
  width: 100%;
  padding: 0 40px 0 12px;
  background: #fff;
  border: 1px solid #769b94;
  color: rgba(0, 0, 0, .7);
  font-size: 14px;
  height: 52px;
}

.nav-form-group > input::-webkit-input-placeholder {
  color: #cbcbcb;
  font-size: 14px;
}

@media (min-width: 993px) {
  .nav-container {
    width: 25%;
    max-width: 360px;
    min-width: 290px;
    box-shadow: 0 0 2rem 0 rgba(136, 152, 170, .15);
  }

  #nav-footer-logo {
    font-size: 70px;
  }
}

/*992px以内，nav-container消失*/
@media (max-width: 992px) {
  .nav-container {
    width: 0;
    padding: 0;
    border-right: none;
    transform: translateX(-100%);
    visibility: hidden;
  }
}
</style>
